<template>
	<view class="home page-main">
		<view class="title">
			<el-link :underline="false" @click="member()"><span class="user"></span></el-link>
			<span class="name">{{ mining.millType && mining.millType != '' ? millType[mining.millType] : '' }}</span>
			<view>
				<span :class="ZH?'EN':'ZH'" @click="changeLanguage(ZH?'EN':'ZH')" ></span>
				<!-- <span class="EN" @click="changeLanguage('EN')" v-if="ZH"></span>
				<span class="ZH" @click="changeLanguage('ZH')"  v-if="!ZH"></span> -->
				<span class="share" @click="showShare()"></span>
			</view>
		</view>
		<view class="msgTip1">
			<span class="tz"></span>
			<el-carousel height="20px" direction="vertical" :autoplay="true">
				<el-carousel-item v-for="(item, index) in msgList" :key="index">
					<h3 class="medium" @click="handleInfo(item)">{{ item.title }}</h3>
				</el-carousel-item>
			</el-carousel>
		</view>
		<view class="tips">
			<span class="fl" @click="hashrate()"><span class="icon01"></span>{{$t('index.about')}}</span>
			<span class="fr" @click="addCommunity()"><span class="icon02"></span>{{$t('index.join')}}</span>
			<!-- <span :class="ZH?'fr':'fl lineHeight24'" v-if="(UpgradeDays - mining.miningCount % UpgradeDays)==13||(UpgradeDays - mining.miningCount % UpgradeDays)==8||(UpgradeDays - mining.miningCount % UpgradeDays)==1">
				{{$t('index.tip_1')}}
				<strong class="yellowFont">{{UpgradeDays - mining.miningCount % UpgradeDays}}</strong>
				{{$t('index.tip_2')}}<strong class="yellowFont">+10%</strong>{{$t('index.tip_3')}}
			</span> -->
		</view>
		<view class="inforData3">
			<span>{{ mining.amountCashNum }}</span>
			<span>CHAT</span>
			<span class="ydy"></span>
			<span>{{ mining.amountCashNum ? (mining.amountCashNum * 0.7).toFixed(2) : 0 }}</span>
			<span>USDT</span>
		</view>
		<view class="f14 textAlignC">
			<span>{{$t('user.yield')}}：{{ (quota + '').substring(0, 9) }} ≈ {{ (quotaTriple + '').substring(0, 9) }} USDT</span>
		</view>
		<view class="box ">
			<view class="pinkbg">
				<span class="hammer"></span>
				<view class="computPower">
					<span>{{$t('index.nowHash')}} (A/h)</span>
					<span class="jt"></span>
					<span>{{ mining.hashrateTotal ? (mining.hashrateTotal * 1).toFixed(3) : 0 }}</span>
				</view>
			</view>
			<view class="purpleBG">
				<span class="time"></span>
				<view class="computPower">
					<span>{{$t('index.nTime')}} (H)</span>
					<span :class="ZH?'EN':'ZH'" @click="changeLanguage(ZH?'EN':'ZH')" ></span>
					<span v-if="ZH" style="margin-top:46rpx;"></span>
					<span v-else style="margin-top:74rpx;"></span>
					<span>{{ mining.millStatus == 1 ? ((new Date().getTime() - mining.millStartTime) / (1000 * 60 * 60)).toFixed(1) : '0' }}</span>
				</view>
			</view>
		</view>
		<view class="inforData4">
			<span v-if="(UpgradeDays - mining.miningCount % UpgradeDays)==13||(UpgradeDays - mining.miningCount % UpgradeDays)==8||(UpgradeDays - mining.miningCount % UpgradeDays)==1">
				{{$t('index.tip_1')}}
				{{mining.miningCount}}
				{{$t('index.tip_2')}}
				{{UpgradeDays - mining.miningCount % UpgradeDays}}
				{{$t('index.tip_3')}}
			</span>
			<span v-else>
				<!--{{$t('index.inforData4')}}-->
				{{$t('index.tip_a')}}
				{{mining.miningCount}}
				{{$t('index.days')}}
			</span>
		</view>
		<scroll-view class="inforData1" scroll-x>
			<view class="grounp">
				<view class="item">
					<span>{{$t('index.allH')}}</span>
					<span class="icon03"></span>
					<span><strong>{{ mining.hashrateTotal }}</strong>A/h</span>
					<span @click="showShare()">{{$t('index.share')}}<i class="el-icon-arrow-right"></i></span>
				</view>
				<view class="item">
					<span>{{ mining.millType && mining.millType != '' ? millType[mining.millType] : '' }}</span>
					<span class="icon04"></span>
					<span><strong>{{ mining.millHashrate }}</strong>A/h</span>
					<span @click="showShare()">{{$t('index.share')}}<i class="el-icon-arrow-right"></i></span>
				</view>
				<view class="item">
					<span>{{$t('index.fission')}}</span>
					<span class="icon05"></span>
					<span><strong>{{ mining.directDriveHashrate }}</strong>A/h</span>
					<span @click="showShare()">{{$t('index.share')}}<i class="el-icon-arrow-right"></i></span>
				</view>
				<view class="item">
					<span>{{$t('index.node')}}</span>
					<span class="icon06"></span>
					<span><strong>{{ mining.nodeHashrate }}</strong>A/h</span>
					<span @click="showShare()">{{$t('index.share')}}<i class="el-icon-arrow-right"></i></span>
				</view>
			</view>
		</scroll-view>
		<!-- APP Download -->
		<!--<view class="download">
			 v-if="!isApple" 
			<el-link :href="configure.appURL" target="_blank" @click.native="downloadBonus()">Download<i class="el-icon-arrow-right"></i></el-link>
		</view>-->
		<view class="task">
			<el-link :underline="false" @click="task()"><p>Get CHAT AI</p><p>Airdrop</p></el-link>
		</view>
		<view class="inProgress" v-if="!disable" @click.stop="handleBtn()">{{$t('index.run')}}</view>
		<view class="inProgress" v-else>{{$t('index.runing')}}</view>
		<!-- add up -->
		<view v-if="addUpDialogVisible">
			<el-dialog :visible.sync="addUpDialogVisible" width="100%" center>
				<!-- <img style="width: 100%" :src="configure.popupURL" alt="" /> -->
				<div class="addUp">
					<h4>Congratulations!</h4>
					<span>{{$t('index.accun')}}<strong>10%</strong></span>
					<span>{{$t('index.newly')}}<strong>{{ mining.miningCount }}</strong>{{$t('index.days')}}</span>
				</div>
			</el-dialog>
		</view>
		
		<!-- share -->
		<view v-if="shareBoxDialogVisible">
			<el-dialog :visible.sync="shareBoxDialogVisible" width="100%" center class="shareBoxDialog">
				<div class="shareBox-H" id="sharebox" ref="sharebox" v-if="ZH">
					<span class="qrcode" id="qrCodeUrl" ref="qrCodeUrl"></span>
				</div>
				<div class="shareBox" id="sharebox" ref="sharebox" v-else>
					<span class="qrcode" id="qrCodeUrl" ref="qrCodeUrl"></span>
				</div>
				<span class="dialog-footer sharebox-btn">
					<el-button :class="ZH?'btn saveBtn':'btn saveBtnEN'" type="primary"  @click="saveImage">{{$t('index.saveImg')}}</el-button>
					<el-button :class="ZH?'btn link':'btn linkEN'" type="primary" v-clipboard:copy="shareUrl" v-clipboard:success="onCopy">{{$t('index.copyUrl')}}</el-button>
				</span>
			</el-dialog>
		</view>
	</view>
</template>

<script>


import authMixin from '@/mixins/auth'
import { getToken } from '@/utils/auth'
import html2Canvas from 'html2canvas'
import QRCode from 'qrcodejs2'
import cookie from 'js-cookie'
//import { saveAs } from 'file-saver'

export default {
	mixins: [authMixin],
	components: {},
	data() {
		  return {
			shareImage:'./static/images/layerTwo.png',
			ZH:true,
		    num: 684.4,
		    msg1: 'ChatAi App Launch Announcement',
		    UpgradeDays: 18,
			output: 10,
		    msg4: '70s/H',
		    loadingNum: 50,
		    centerDialogVisible: false,
		    fill: { gradient: ['#FFC521', '#FFEDA5'] },
		    progressNum: 0,
		    nowTime: 0,
		    msgList: [],
		    timeClass: 'nowTime nowTime1',
		    disable: true,
		    mining: {},
		    shareUrl: '',
			hashrateVisible: false,
		    millType: {
		      1: this.$t('myTeam.mx'),
		      2: this.$t('myTeam.hx'),
		      3: this.$t('myTeam.jx'),
		      4: this.$t('myTeam.sx')
		    },
		    dataURL: '',
			dataBlob: '',
			shareImageUrl: '',
			saveBtn: false,
		    isApple: true,
		    addUpDialogVisible: false,
		    shareBoxDialogVisible: false,
		    // Join Community
		    communityVisible: false,
		    configure: {
		      appURL: '',
		      popularizeURL: '',
		      popupURL: '',
		      downLoadURL: '',
		      shareURL: ''
		    },
		    quotaUnit: 0,
		    quotaTotal: 0,
		    quota: 0,
		    quotaTriple: 0,
		    timer: null,
		    // authentication status
		    authStatus: '1',
		    authStatusOptions: {
		      1: 'Unverified',
		      2: 'Unverified',
		      3: 'In Progress',
		      4: 'verified',
		      5: 'Failed'
		    },
			
		  }
	},
	methods: {
		  goBack() {
			  this.$router.push('/pages/home/index')
		  },
		  progress(event, progress, stepValue) {
		    //console.log(stepValue);
		  },
		  progress_end(event) {
		    // console.log("Circle progress end");
		  },
		  // Mining
		  handleBtn() {
		    this.disable = false
		    let user = localStorage.getItem('user')
		    if (user != undefined && user != null && user != '') {
		      user = JSON.parse(user)
		      let params = {
		        customerId: user.customerId,
		        token: user.token,
		        username: user.username
		      }
		      this.$api.home
		        .startMining(params)
		        .then((res) => {
		          if (res.code == '200') {
		            this.disable = true
		            this.getTimer()
		            // this.$message({ message: res.msg, type: 'success' })
		          } else {
		            this.$message.error(res.msg)
		          }
		        })
		        .catch((error) => {})
		    }
		  },
		handleInfo(item) {
			this.$router.push('/pages/message/detail?type=index&id='+item.id)
			/*uni.reLaunch({
				url: `/pages/message/detail_?id=${item.id}&type=list`
			})*/
		},
		  // timer
		  getTimer() {
		    this.timer = setInterval(() => {
		      if (this.quota >= this.quotaTotal) {
		        this.timer = null
		        //this.timeAxis()
		      } else {
		        this.quota = this.addition(this.quota, this.quotaUnit)
		        this.quotaTriple = this.quota * 0.7
		      }
		    }, 10)
		  },
		  addition(arg1, arg2) {
		    var r1, r2, m, n
		    try {
		      r1 = arg1.toString().split('.')[1].length
		    } catch (e) {
		      r1 = 0
		    }
		    try {
		      r2 = arg2.toString().split('.')[1].length
		    } catch (e) {
		      r2 = 0
		    }
		    m = Math.pow(10, Math.max(r1, r2))
		    n = r1 >= r2 ? r1 : r2
		    return ((arg1 * m + arg2 * m) / m).toFixed(n)
		  },
		  // Scroll Message
		  getMsgList() {
		    let params = {
		      token: getToken(),
		      page: 0,
		      size: 10
		    }
		    this.$api.home
		      .getMsgList(params)
		      .then((res) => {
		        if (res.code == '200') {
		          this.msgList = res.data.rows
		        }
		      })
		      .catch((error) => {})
		  },
		  // Download rewards
		  downloadBonus() {
		    console.log('download begin...')
		    let params = {
		      token: getToken()
		    }
		    this.$api.home
		      .downloadBonus(params)
		      .then((res) => {
		        if (res.code == '200') {
		          console.log('success')
		        }
		      })
		      .catch((error) => {})
		  },
		  // Mining Information
		  miningInfo() {
		    let user = localStorage.getItem('user')
		    if (user != undefined && user != null && user != '') {
		      user = JSON.parse(user)
		      let params = {
		        token: user.token,
		        customerId: user.customerId
		      }
		      this.$api.home
		        .miningInfo(params)
		        .then((res) => {
		          if (res.code == '200') {
		            let data = res.data != undefined ? JSON.parse(res.data) : res.data
		            this.mining = data
		            //this.timeAxis()
		            //console.log(data)
		            this.mining.millStatus == 1 ? (this.disable = true) : (this.disable = false)
		            this.quotaUnit = (this.mining.hashrateTotal * 1) / 360000
		            this.quotaTotal = this.mining.hashrateTotal * 1 * 24
		            console.log(this.quotaUnit)
		            console.log(this.quotaTotal)
		            if (this.disable) {
		              this.quota = ((new Date().getTime() - this.mining.millStartTime) / 10) * this.quotaUnit
		              this.getTimer()
		            }
					//congratulation
					console.log("============"+this.mining.miningCount)
					if(this.mining.miningCount>1 && this.mining.miningCount % this.UpgradeDays==0){
						this.addUp()
					}
		          }
		        })
		        .catch((error) => {})
		    }
		  },
		  // Join Community
		  addCommunity() {
		    //this.$router.push('/pages/onlineService/index');
			uni.navigateTo({
			  url: '/pages/onlineService/index',
			  animationType: "slide-in-right",
			  animationDuration: 2000
			})
		  },
		  member(){
			this.$router.push('/pages/user/index')
		  },
		  hashrate(){
			//this.$router.push('/pages/computingPower/index');
			uni.navigateTo({
			  url: '/pages/computingPower/index',
			  animationType: "slide-in-right",
			  animationDuration: 2000
			})
		  },
		  // Share QR code
		  async showShare() {
				let params = {
					token: getToken()
				}
				const res = await this.$api.home.getQRcode(params)
				if (res.code == '200') {
		          let datas = res.data
				  //this.shareImage=datas.accessPath
		          this.shareUrl = datas.shareUrl + '?invite=' + this.mining.inviterCode
		          this.shareBoxDialogVisible = true
		          this.$nextTick(() => {
		            this.creatQrCode()
		          })
				}
		  },
		  shareImg(){
			let params = {
				token: getToken()
			}
			this.$api.home.getQRcode(params).then(
				(res) => {
					if (res.code == '200') {
						this.shareImage=res.data.accessPath  
					  }
				}
			)
			
		  },
		  changeLanguage(val){
				this.ZH=!this.ZH;
				this.$i18n.locale = val
				cookie.set("lang",val)
				this.appDown()
				this.getMsgList()
				this.millType={
				  1: this.$t('myTeam.mx'),
				  2: this.$t('myTeam.hx'),
				  3: this.$t('myTeam.jx'),
				  4: this.$t('myTeam.sx')
				}
			 //  if('EN'==cookie.get('lang')){
				// cookie.set("lang","ZH");
			 //  }else{
				// cookie.set("lang","EN");
			 //  }
			  //this.$router.go(0);
		  },
		  addUp(){
			  this.addUpDialogVisible = true
		  },
		  // Generate QR code
		  creatQrCode() {
		    const qrContainer = document.getElementById('qrCodeUrl')
		    qrContainer.innerHTML = ''
		    new QRCode(qrContainer, {
		      text: this.shareUrl, // Content of QR code
		      width: 70,
		      height: 70,
		      colorDark: '#000000',
		      colorLight: '#ffffff',
		      correctLevel: QRCode.CorrectLevel.H,
		      whiteMargin: true
		    })
		    const that = this
		    // const dom = document.getElementById('sharebox')
			/*
			html2Canvas(document.querySelector('#sharebox')).then(function (canvas) {
				canvas.toBlob(function(blob) {
				    that.dataBlob = blob
				    that.saveBtn = true
				  }, 'image/jpeg');
				that.saveBtn = true
			})*/
			//console.log(document.querySelector('#sharebox'))
			html2Canvas(document.querySelector('#sharebox')).then(function (canvas) {
			  that.dataBlob = canvas.toDataURL('image/jpeg', 1.0)
			  that.saveBtn = true
			})
		  },
		  // Save Picture
		  saveImage() {
			//console.log(this.dataBlob);
		    const a = document.createElement('a')
			//a.href = URL.createObjectURL(this.dataBlob)
			a.href=this.dataBlob
		    a.download = new Date().getTime() + '.jpg'
		    a.click()
		  },
		  // copy
		  onCopy() {
		    this.$message({ message: this.$t('user.copySuc'), type: 'success' })
		  },
		  // copy failed
		  onError() {
		    this.$message.error('copy failed')
		  },
		  // Is it Android or ios
		  appDown() {
		    var u = navigator.userAgent
		    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
		    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 // Android terminal
		    if (isiOS) {
		      this.isApple = true
		    } else if (isAndroid) {
		      this.isApple = false
		    }
		  },
		  task(){
			this.$router.push('/pages/task/index')
		  }
	},
	mounted() {
		if(cookie.get('lang')=='EN' || cookie.get('lang')==undefined){
			this.ZH=false;
		}else{
			this.ZH=true;
		}
		this.appDown()
		this.miningInfo()
		this.getMsgList()
		uni.request({
		  url: '/static/images/popularize-108.png',
		  responseType: 'arraybuffer',
		  success: res => {
			const base64data = uni.arrayBufferToBase64(res.data)
			this.shareImageUrl = `data:image/png;base64,${base64data}`
		  }
		})
	},
	created() {
		//console.log('==========='+window.g);
		 this.configure = window.g;
		 this.shareImg();
	}
}
</script>

<style lang="scss" scoped>
.home {
	a{
		text-decoration: none;
	}
	padding:0 40rpx;
	position: relative;
	height: 100%;
	min-height:1624rpx;
	background:#88B2FF url('@/static/images/home1/bg.png') no-repeat;
	background-size:100%;
	.title{
		width:100%;
		padding:20rpx;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		.user{
			display: inline-block;
			background:url(@/static/images/home1/user.png) no-repeat;
			width:70rpx !important;
			height:70rpx !important;
			background-size:100%;
		}
		.name{
			font: 500 36rpx/90rpx PingFangSC;
			color:#333;
		}
		.ZH{
			display: inline-block;
			background:url('@/static/images/home1/Kr.png') no-repeat;
			width:40rpx;
			height:40rpx;
			background-size:100%;
			margin-top: 26rpx;
		}
		.EN{
			display: inline-block;
			background:url('@/static/images/EN.png') no-repeat;
			width:40rpx;
			height:40rpx;
			background-size:100%;
			margin-top: 13px;
		}
		
		.share{
			display: inline-block;
			background:url('@/static/images/home1/share.png') no-repeat;
			margin-left:24rpx;
			width:40rpx;
			height:40rpx;
			background-size:100%;
		}
	}
	.tips{
		margin-top:40rpx;
		height:34rpx;
		font:400 24rpx/34rpx Arial;
		color:#333;
		.icon01{
			display:inline-block;
			background:url('@/static/images/home1/slgz.png') no-repeat;
			width:28rpx;
			height:28rpx;
			background-size:100%;
			vertical-align:top;
		}
		.icon02{
			display:inline-block;
			background:url('@/static/images/home1/slgz.png') no-repeat;
			width:28rpx;
			height:28rpx;
			background-size:100%;
			vertical-align: top;
		}
	}
	.yellowFont{
		color: #FFB73C;
	}
	.msgTip1 {
		width:100%;
		height:76rpx;
		margin: 10rpx auto;
		line-height: 30rpx;
		padding:20rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 19px;
		font:400 26rpx/36rpx Arial;
		.tz{
			display: block;
			width:36rpx;
			height:36rpx;
			float: left;
			padding-left:16rpx;
			background:url('@/static/images/home1/tzbf.png') no-repeat 0 -8rpx;
			background-size: 100% !important;
		}
		/deep/ .el-carousel__indicators--vertical {
			display: none;
		}
	}
	.inforData{
		width:100%;
		height:255rpx;
		margin:90rpx 0 40rpx;
		display: flex;
		justify-content: space-between;
		color:rgba(255, 255, 255, 0.8);
		.computPower{
			span{
				display: block;
				text-align: center;
			}
			span:nth-child(1){
				font:400 30rpx/30rpx PingFangSC;
			}
			span.jt{
				background:url(@/static/images/home/jt2x.png) no-repeat center top;
				width:50rpx;
				height:28rpx;
				background-size:100%;
				margin:30rpx auto;
			}
			span:nth-child(3){
				font:600 50px/100rpx PingFangSC;
			}
		}
		.time{
			span{
				display: block;
				text-align: center;
			}
			span:nth-child(1){
				font:400 30rpx/30rpx PingFangSC;
			}
			span:nth-child(2){
				margin:85rpx auto;
				font:600 50px/100rpx PingFangSC;
			}

		}
	}
	.tips1{
		width: 100%;
		text-align: center;
		margin-top:40rpx;
		height:34rpx;
		font:400 30rpx/24rpx Arial;
		color:rgba(255, 255, 255, 0.8);
		a{
			text-decoration:none !important;
			margin-left: 20rpx;
		}
	}
	.inforData1{
		width:100%;
		margin:60rpx 0 30rpx;
		display: flex;
		justify-content: space-between;
		color: #333;
		// .inforData1Box{
		// 	width:33.3%;
		// }
		.grounp{
			white-space: nowrap;
			.item{
				display: inline-block;
				width: 266rpx;
				height:320rpx;
				overflow:hidden;
				background: #FFFFFF;
				//background-color: red;
				border-radius: 40rpx;
				padding:20rpx 10rpx;
				margin-right:30rpx ;
				box-sizing: border-box;
				span{
					display: block;
					text-align: center;
					line-height:32rpx;
					white-space: break-spaces;
					color:#333;
				}
				span:nth-child(1){
					font-size:28rpx;
					height:64rpx;
					color: #999;
					line-height:28rpx;
				}
				span:nth-child(2){
					font-size:22rpx;
				}
				span:nth-child(3){
					font-size:24rpx;
					strong{
						font-size:52rpx;
						font-weight: bold;
					}
				}
				span:nth-child(4){
					color: #00D266;
					font-size:24rpx;
					line-height:44rpx !important;
				}
				.icon03{
					background:url(@/static/images/home1/zsl.png) no-repeat center top;
					width:100rpx;
					height:100rpx;
					background-size:100%;
					margin:10rpx auto;
				}
				.icon04{
					background:url(@/static/images/home1/CHATAI.png) no-repeat center top;
					width:100rpx;
					height:100rpx;
					background-size:100%;
					margin:10rpx auto;
				}
				.icon05{
					background:url(@/static/images/home1/lbsl.png) no-repeat center top;
					width:100rpx;
					height:100rpx;
					background-size:100%;
					margin:10rpx auto;
				}
				.icon06{
					background:url(@/static/images/home1/jdsl.png) no-repeat center top;
					width:100rpx;
					height:100rpx;
					background-size:100%;
					margin:10rpx auto;
				}
			}
			.item:last-child{
				margin-right: 0;
			}
		}
		
	}
	.inforData1EN{
		.inforData1Box:nth-child(1){
			width:25%;
		}
		.inforData1Box:nth-child(2){
			width:40%;
		}
		.inforData1Box:nth-child(3){
			width:35%;
		}
	}
	.inforData2{
		width:100%;
		height:64rpx;
		margin:20rpx 0;
		display: flex;
		justify-content:space-evenly;
		color: #F5F5F5;
		font:400 24rpx/50rpx PingFangSC;
		span{
			vertical-align: bottom;
			margin-right: 10rpx;
		}
		.monitor{
			display: inline-block;
			background:url(@/static/images/home/monitor2x.png) no-repeat 0 10rpx;
			width:35rpx;
			height:53rpx;
			background-size:100%;
		}
		.addteam{
			display: inline-block;
			background:url(@/static/images/home/addteam2x.png) no-repeat 0 10rpx;
			width:35rpx;
			height:53rpx;
			background-size:100%;
		}
		a{
			color: #FFFFFF;
		}
	}
	.inforData2En{
		display: block !important;
		overflow: hidden;
		height:128rpx;
		text-align: center;
	}
	.inforData3{
		width:100%;
		height:64rpx;
		margin:10rpx 0;
		// display: flex;
		// justify-content:center;
		font:400 24rpx/40rpx PingFangSC;
		text-align: center;
		span{
			vertical-align: baseline;
			padding:0 10rpx;
		}
		.ydy{
			display: inline-block;
			background:url(@/static/images/home1/ydy.png) no-repeat 0 14rpx;
			width:20rpx;
			height:30rpx;
			background-size:100%;
			padding:0;
		}
		span:nth-child(1){
			font-size:46rpx;
		}
		span:nth-child(2){
			font-size:26rpx;
			text-transform:capitalize;
			color: #999999;
		}
		span:nth-child(4){
			font-size:46rpx;
		}
		span:nth-child(5){
			font-size:26rpx;
			color: #999999;
		}
	}
	.inProgress{
		width:90%;
		overflow: hidden;
		margin:34rpx auto;
		text-align: center;
		line-height: 100rpx;
		font-size:32rpx;
		height:100rpx;
		background: #6D50DF;
		border-radius:50rpx;
		color:#fff;
	}
	.sharedialog {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.3);
		z-index: 999;
		.close {
			position: absolute;
			top: 140rpx;
			right: 10%;
			font-size: 42rpx;
			color: #fff;
		}
		.sharebox {
			display: inline-block;
			position: relative;
			width: 80%;
			margin: 200rpx 10% 0;
			img {
				float: left;
			}
			.tips {
				position: absolute;
				right: 24rpx;
				bottom: 30rpx;
				font-weight: 300;
				font-size: 24rpx;
				font-family: 'Arial,Helvetica Neue,Helvetica,sans-serif';
				color: #fff;
			}
			.qrcode {
				position: absolute;
				z-index: 2023;
				bottom: 80rpx;
				right: 24rpx;
				width: 180rpx;
				height: 180rpx;
				display: inline-block;
				// border: 6rpx solid #fff;
			}
			.qrcode img {
				width: 180rpx;
				height: 180rpx;
				background-color: #fff;
				padding: 0;
				box-sizing: border-box;
			}
			.imgbox {
				display: inline-block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				opacity: 0;
			}
		}
		/deep/ .sharebox-btn {
			position: absolute;
			display: flex;
			text-align: center;
			width: 80%;
			margin: 30rpx 10%;
			.btn {
				flex: 1;
			}
		}
	}
	.addUp{
		background: url(@/static/images/dayBG.png) no-repeat;
		background-size: 100%;
		width:660rpx;
		height:964rpx;
		padding:20rpx 15rpx;
		box-sizing: border-box;
		text-align: center;
		margin: 0 auto;
		h4{
			text-align:center;
			color:#fff;
			font-size:28rpx;
			font: 600 36rpx/28px PingFangSC;
		    margin-bottom:224rpx;
		}
		span{
			display: block;
			color: #333;
			font:500 26rpx/20px PingFangSC;
			margin:0 auto;
			strong{
				color: #6F53E0;
				font:600 32rpx/20px PingFangSC;
			}
		}
		span:nth-child(2){
			width:190rpx;
		}
		span:nth-child(3){
			width:284rpx;
		}
	}
	.shareBox{
		width:750rpx !important;
		height:1260rpx !important;
		box-sizing: border-box;
		text-align: center;
		margin: 0 auto;
		background: url(@/static/images/shareBG-e.png) no-repeat;
		background-size: 100%;
		position: relative;
		overflow: hidden;
		span{
			display: block;
			width:140rpx !important;
			height:140rpx !important;
			position: absolute;
			top:880rpx !important;
			left: 306rpx !important;
			box-sizing: border-box;
			overflow: hidden;
			//background-color: red;
		}
		
	}
	.shareBox-H{
		width:100%;
		height:100%;
		min-height:1334rpx;
		box-sizing: border-box;
		text-align: center;
		margin: 0 auto;
		background: url(@/static/images/shareBG-h.png) no-repeat;
		background-size: 100%;
		img{
			width:650rpx;
			height:482rpx;
			position: relative;
			z-index: -1;
		}
		span{
			display: block;
			background:#000;
			width: 148rpx;
			height:148rpx;
			position: absolute;
			top: 874rpx;
			left: 302rpx;
		}
	}
	.sharebox-btn{
		position: relative;
		top: -124rpx;
	   left: 120rpx;
		.btn{
			width:260rpx;
			height:92rpx;
			background: #6D50DF;
			border-radius:46rpx;
			font:500 32rpx/20px PingFangSC;
		}
		// .saveBtn{
			
		// }
		// .saveBtnEN{
		// 	// background: url(@/static/images/saveEN.png) no-repeat  !important;
		// 	// background-size:100% !important;
		// }
		// .link{
		// 	// background: url(@/static/images/link.png) no-repeat  !important;
		// 	// background-size:100% !important;
		// }
		// .linkEN{
		// 	// background: url(@/static/images/linkEN.png) no-repeat  !important;
		// 	// background-size:100% !important;
		// }
	}
	.hashrateVisible {
		.el-dialog{
			margin-top:5vh !important;
		}
	}
	.lineHeight24{
		line-height:76rpx;
	}
	.download{
		position:absolute;
		right:0;
		bottom:44%;
		width:244rpx;
		height:240rpx;
		background: url(@/static/images/down.png) no-repeat -10rpx -4rpx;
		background-size:100% ;
		line-height:390rpx;
		text-align: center;
		font-size:24rpx;
		.el-link.el-link--default {
		    color: #734EEE;
			font-weight: bold;
		}
	}
	.task{
		position:absolute;
		right: 30rpx;
		bottom: 44%;
		width: 230rpx;
		height: 64rpx;
		padding: 18rpx 0;
		// background: url(@/static/images/down.png) no-repeat -10rpx -4rpx;
		// background-size:100% ;
		background-image: linear-gradient(0deg, #a319a0 0%, #04165f 100%);
		border: 1px solid #FFFFFF;
		border-radius: 50rpx;
		text-align: center;
		.el-link.el-link--default {
		    color: #734EEE;
			font-weight: bold;
		}
		p {
			color: #fff;
			font-style: italic !important;
			font: 600 24rpx/32rpx 'PingFangSC';
		}
	}
	.box{
		width:100%;
		margin:80rpx auto;
		display: flex;
		justify-content: space-between;
		.computPower{
			position: absolute;
			top:96rpx;
			span{
				display: block;
				text-align: left;
			}
			span:nth-child(1){
				font:400 30rpx/30rpx PingFangSC;
				color:#fff;
			}
			span.jt{
				background:url(@/static/images/home/jt2x.png) no-repeat center top;
				width:50rpx;
				height:28rpx;
				background-size:100%;
				margin:15rpx 0;
			}
			span:nth-child(3){
				font:600 36px/100rpx PingFangSC;
				color:#fff;
			}
		}
		.pinkbg{
			position: relative;
			width:320rpx;
			height:322rpx;
			padding:28rpx;
			box-sizing: border-box;
			background:url('@/static/images/home1/pingBG.png') no-repeat;
			background-size:100%;
			.hammer{
				display: block;
				position: absolute;
				top: -38rpx;
				right:0rpx;
				width:126rpx;
				height:212rpx;
				background:url('@/static/images/home1/sl.png') no-repeat;
				background-size:100%;
			}
			.text{
				display: block;
				position: absolute;
				top:90rpx;
				font-size:26rpx;
				color:#fff;
			}
		}
		.purpleBG{
			position: relative;
			width:320rpx;
			height:322rpx;
			padding:28rpx;
			box-sizing: border-box;
			background:url('@/static/images/home1/purpleBG.png') no-repeat;
			background-size:100%;
			.time{
				display: block;
				position: absolute;
				top: -48rpx;
				right:0rpx;
				width:126rpx;
				height:212rpx;
				background:url('@/static/images/home1/time.png') no-repeat;
				background-size:100%;
			}
			.computPower{
				font-size: 13px;
				color:#fff;
				span:nth-child(4){
					font:600 36px/123rpx PingFangSC;
					color:#fff;
				}
			}
		}
	}
	.inforData4{
		width:100%;
		height:86rpx;
		background: #F1F7FF;
		border-radius:43rpx;
		color: #333333;
		font:400 26rpx/34rpx Arial;
		padding:10rpx;
		text-align: center;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
}

</style>